<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Sell",
  data(){
    return{
      uaFlag:false,
      title:'',
      user:{},
      searchKey:'',
      page:{},
      pageSize:5,
      dialogFormVisible:false,
      form:{
        id:'',
        photos:[],
        coverPath:'',
        name:'',
        describe:'',
        price:'',
        number:''
      },
      uploadFileUrl:'http://localhost:8081/community/appendImg',
    }
  },
  methods:{
    update(row){
      this.form.id=row.id
      this.form.name=row.name
      this.form.price=row.price
      this.form.number=row.number
      this.form.describe=row.describe
      this.title='修改商品'
      this.dialogFormVisible=true
      this.uaFlag=true
    },
    up(id){
      this.$axios.post('sell/up?productId='+id).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.paging(1)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    del(id){
      this.$axios.post('sell/del?productId='+id).then(resp=>{
        if (resp.data.flag){
          this.$message.success(resp.data.msg)
          this.paging(1)
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    paging(curPage){
      this.$axios.get('sell/list?userId='+this.user.id+'&curPage='+curPage+'&pageSize='+this.pageSize+'&searchKey='+this.searchKey).then(resp=>{
        this.page=resp.data.data
      })
    },
    clean(){
      this.form.id=''
      this.form.photos=[]
      this.form.coverPath=''
      this.form.name=''
      this.form.describe=''
      this.form.price=''
      this.form.number=''
      this.dialogFormVisible=false
    },
    uploadCover(resp,file,fileList){
      if(resp.flag){
        this.form.photos.push(resp.msg)
        this.$message.success('上传成功')
      }else{
        this.$message.error(resp.msg)
      }
    },
    uploadCover1(resp,file,fileList){
      if(resp.flag){
        this.form.coverPath=resp.msg
        this.$message.success('上传成功')
      }else{
        this.$message.error(resp.msg)
      }
    },
    saveAdd(){
      if (!this.form.name){
        this.$message.info('请输入商品名')
        return
      }
      if (!this.form.describe){
        this.$message.info('请输入商品描述')
        return;
      }
      if (!this.form.price){
        this.$message.info('请输入单价')
        return;
      }
      if (!this.form.number){
        this.$message.info('请输入库存')
        return;
      }
      if (!this.form.coverPath){
        this.$message.info('请上传封面')
        return;
      }
      if (!this.form.photos){
        this.$message.info('请上传图片')
        return;
      }
      let fd=new FormData
      Object.keys(this.form).forEach(key=>{
        fd.append(key, this.form[key])
      })
      fd.append('userId',this.user.id)
      if (this.uaFlag){
        this.$axios.post('sell/update',fd).then(resp=>{
          if (resp.data.flag){
            this.$message.success(resp.data.msg)
            this.clean()
          }else {
            this.$message.error(resp.data.msg)
          }
          this.searchKey=''
          this.paging(1)
        })
      }else {
        this.$axios.post('sell/add',fd).then(resp=>{
          if (resp.data.flag){
            this.$message.success(resp.data.msg)
            this.clean()
          }else {
            this.$message.error(resp.data.msg)
          }
          this.searchKey=''
          this.paging(1)
        })
      }
    },
    add(){
      this.uaFlag=false
      this.title='上传商品'
      this.dialogFormVisible=true
    }
  },
  created() {
    this.user=getUser()
    this.paging(1)
  }
}
</script>

<template>
<div>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-input v-model="searchKey" placeholder="请输入要查询的名称"></el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="paging(1)">查询</el-button>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="add">添加</el-button>
    </el-col>
  </el-row>

  <el-table
    :data="page.list"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="商品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="describe"
      label="描述"
      width="180">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="封面">
      <template slot-scope="scope">
        <div>
          {{ scope.row.status }}
          <img :src="scope.row.coverPath" style="width: 80px">
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      width="80px"
    >
    </el-table-column>
    <el-table-column
      prop="number"
      label="数量"
      width="80px"
    >
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="状态">
      <template slot-scope="scope">
        <div class="photo-container">
          {{ scope.row.status }}
          <span v-if="scope.row.state===0">
            <el-button type="text">审核中</el-button>
          </span>
          <span v-if="scope.row.state===1">
            <el-button type="text">已上架</el-button>
          </span>
          <span v-if="scope.row.state===2">
            <el-button type="text">已下架</el-button>
          </span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="照片">
      <template slot-scope="scope">
        <div class="photo-container">
          {{ scope.row.status }}
          <img :src="photo.photopath" width="33.33%" v-for="photo in scope.row.photoList">
        </div>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="操作">
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button type="text" @click="update(scope.row)">修改</el-button>
        <el-button v-if="scope.row.state!==2" type="danger" @click="del(scope.row.id)">下架</el-button>
        <el-button v-if="scope.row.state===2" type="text" @click="up(scope.row.id)">上架</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="display: flex;  justify-content: center;"
    @size-change="handleSizeChange"
    @current-change="paging"
    :current-page="page.pageNum"
    :page-sizes="[5,10,15,20]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total">
  </el-pagination>

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clean">
    <el-form :model="form">
      <el-form-item label="商品名：" style="width: 80%">
        <el-input v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述：" style="width: 80%">
        <el-input v-model="form.describe" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="单价：" style="width: 80%">
        <el-input type="number" v-model="form.price" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="库存：" style="width: 80%">
        <el-input type="number" v-model="form.number" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="照片" style="width: 80%">
        <el-upload
          class="upload-demo"
          :action="uploadFileUrl"
          :auto-upload="true"
          name="photo"
          :on-success="uploadCover"
          multiple
          :limit="9"
          list-type="picture-card">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="封面" style="width: 80%">
        <el-upload
          class="upload-demo"
          :action="uploadFileUrl"
          :auto-upload="true"
          name="photo"
          :on-success="uploadCover1"
          multiple
          :limit="1"
          list-type="picture-card">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="clean">取 消</el-button>
      <el-button type="primary" @click="saveAdd">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>
